<template>
  <div class="custom-tree-container">
    <!-- 新增按钮 -->
    <el-row type="flex" justify="space-between" style="margin-bottom:20px;">
      <div>
        <el-button @click="handleToAdd">新增</el-button>
      </div>
    </el-row>
    <!-- 树形控件的导航 -->
    <el-tree :data="[0]" class="header_tree">
      <div class="custom-tree-node">
        <span>类型</span>
        <span>排序</span>
        <span>操作</span>
      </div>
    </el-tree>
    <!-- show-checkbox 是否显示选择框
    node-key 节点的主键
    default-expand-all 默认展开所有节点
    expand-on-click-node 是否点击节点展开-->
    <el-tree
      :data="data"
      show-checkbox
      node-key="id"
      default-expand-all
      :expand-on-click-node="false"
    >
      <span class="custom-tree-node" slot-scope="row">
        <span style="width: 60px">{{row.data.label}}</span>
        <el-input
          class="sort_input"
          v-model="row.data.sort_id"
          style="margin-right: 50px"
          :disabled="!row.data.disabled_item"
          size="mini"
        ></el-input>
        <span>
          <!-- 只有点击编辑的时候，输入框才可以输入 -->
          <el-button v-if="isShow" type="text" size="mini" @click="handleEdit(row.data)">编辑</el-button>
          <el-button v-if="!isShow" type="text" size="mini" @click="handleFinish(row.data)">完成</el-button>
        </span>
      </span>
    </el-tree>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: [],
      isShow: true
    };
  },
  methods: {
    // 只是负责跳转到新增页面的方法
    handleToAdd() {
      this.$router.push("/admin/category-add")
    },
    // 编辑的方法
    handleEdit(argc) {
      // 取消禁止框
      this.isShow = !this.isShow;
      argc.disabled_item = true;
    },
    // 编辑完成的方法
    handleFinish(data) {
      this.isShow = !this.isShow;
      data.disabled_item = false;
      // 发送请求
      this.$axios({
        method: "POST",
        url: `/admin/category/edit/${data.category_id}`,
        // 由于在8080端口下去请求8899端口，涉及到跨域
        withCredentials: true,
        data
      }).then(res => {
        if (res.data.status == 0) {
          this.$message({
            message: res.data.message,
            type: "success"
          });
        } else {
          this.$message.error(message)
        }
      });
    }
  },
  mounted() {
    // 加载页面后发送请求商品分类目录渲染页面
    this.$axios({
      url: "/admin/category/getlist/goods"
    }).then(res => {
      const { message, status } = res.data;
      if (!status) {
        // 请求成功
        this.data = message.map(v => {
          return {
            ...v,
            id: v.category_id,
            label: v.title,
            disabled_item: false
          };
        });
      } else {
        thos.$message.error(message);
      }
    });
  }
};
</script>

<style>
.custom-tree-container {
  margin-top: 20px;
}
.el-row {
  margin-top: 0;
}
.el-tree-node__content {
  padding-top: 10px;
}
.sort_input {
  width: 50px;
}
.el-input__inner {
  text-align: center;
  padding: 0;
}
.header_tree {
  font-weight: 600;
  font-size: 16px;
}
.header_tree .el-icon-caret-right {
  visibility: hidden;
}
/* 树形控件的样式 */
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 18px;
}
/* 到这里结束 */
</style>